<template>
  <div>
    <el-descriptions title="商品详情">

      <el-descriptions-item label="产品编号">
        {{ proinfo.id }}
      </el-descriptions-item>

      <el-descriptions-item label="产品名称">
        {{ proinfo.name }}
      </el-descriptions-item>

      <el-descriptions-item label="年利率(%)">
        {{ proinfo.annualProfitRate }}
      </el-descriptions-item>

      <el-descriptions-item label="起存金额(元)">
        {{ proinfo.initialDepositAmount }}
      </el-descriptions-item>

      <el-descriptions-item label="递增金额(元)">
        {{ proinfo.incrementalAmount }}
      </el-descriptions-item>

      <el-descriptions-item label="单人限额(元)">
        {{ proinfo.limitAmount }}
      </el-descriptions-item>

      <el-descriptions-item label="单日限额(元)">
        {{ proinfo.dayLimitAmount }}
      </el-descriptions-item>

      <el-descriptions-item label="风险等级">
        <el-tag size="small">{{ proinfo.riskLevel }}</el-tag>
      </el-descriptions-item>

      <el-descriptions-item label="结息方式">
        {{ proinfo.interestSettlementMethod }}
      </el-descriptions-item>

      <el-descriptions-item label="期限(月)">
        <el-tag size="small">{{ proinfo.term }}</el-tag>
      </el-descriptions-item>

      <el-descriptions-item label="库存">
        {{ proinfo.allowance }}
      </el-descriptions-item>

    </el-descriptions>

    <el-button type="danger" style="float: right; width: 15%" @click="handleClick">
      立即存入
    </el-button>

     <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <el-input placeholder="请输入购买金额" v-model="amount" clearable />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sendOrder">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {getProduct} from '@/api/product';

export default {
  name: "Detail",
  data() {
    return {
      proinfo: {},
      uid: null,
      pid: "",
      dialogVisible: false,
      amount: undefined
    };
  },
  created() {
    this.pid = this.$route.params.productId;
    this.getProductById(this.pid)
  },
  methods: {
    getProductById(pid) {
      getProduct(pid).then(res => {
        this.proinfo = res.data;
      })
    },
    handleClick() {
      this.dialogVisible = true;
    },
    sendOrder() {
      if(this.amount < this.proinfo.initialDepositAmount) {
        this.$message.warning("购买金额小于限定金额，请重新输入");
        this.amount = 0;
      }else {
        this.$store.commit("SET_PID",this.pid);
        this.$store.commit("SET_PMIN",this.amount);
        this.$router.push('/orderinfo');
      }
    }
  },
};
</script>
